<template>
  <div style="height:100vh;background:#f5f5f5">
    <div>
      <p style="margin:0;padding:10px;background:#fff">
        <i class="iconfont icon-left" style="color:#1392D7" @click="goUpperStory()"></i>
        <span style="margin:0 10px">填写信息</span>
      </p>
    </div>
    <div style="margin:20px 0;font-size:14px">
      <p style="margin:0;background:#fff;padding:14px 10px">订单号：2020010930122354</p>
    </div>
    <div>
      <span style="font-size:13px;color:#8E8E8D;padding:0 10px">请填写付款人信息</span>
      <div style="font-size:13px;">
        <div style="display:flex;margin:10px 0;padding:10px;margin:2px;background:#fff;">
          <span style="width:35%;text-align:left">账户绑定提币地址</span>
          <input type="text" style="border:none;padding:0 10px" placeholder="https://" />
        </div>
        <div style="display:flex;margin:10px 0;padding:10px;margin:2px;background:#fff;">
          <span style="width:35%;text-align:left">充币账号</span>
          <input type="text" style="border:none;padding:0 10px" placeholder="https://" />
        </div>
      </div>
    </div>
    <div style="display:flex;background:#fff;margin:20px 0;padding:10px;font-size:13px">
      <span style="width:35%">电话号码</span>
      <input type="text" placeholder="138******88" style="border:none" />
    </div>
    <div style="font-size:10px;color:#DE2E2E;padding:20px 10px">
      <p style="margin:0;padding:2px">请注意：如果您本次用于充币的地址不是您绑定账户的地址</p>
      <p style="margin:0;padding:2px">请务必把本次充币的钱包地址填写上</p>
      <input
        type="text"
        style="width:100%;margin-left:5px;padding-left:3px;border:1px solid red;border-radius:2px;color:#000;height:20px;line-height:20px"
        placeholder="https://"
      />
      <p style="margin:0;padding:2px">否则将无法核对</p>
    </div>
    <div style="width:100%;text-align:center">
      <van-button
        @click="shows=true"
        style="height:36px;line-height:36px;border-radius:20px;width:100px"
        color="#1F91E2"
      >下一步</van-button>
    </div>

    <van-popup v-model="shows" round position="bottom" style="height:56%;border-radius: 0;">
      <div style="background:#F6F6F6;height:100%;">
        <div style="height:40px">
          <span
            class="iconfont icon-guanbi1"
            style="display:inline-block;padding:10px;color:#838383"
            @click="shows=false"
          ></span>
          <span style="display:inline-block;width:80%;text-align:center">商家钱包码地址</span>
          <span
            class="iconfont icon-wenti"
            style="font-size:18px;position:absolute;right:10px;top:8px;color:#3684AC"
          ></span>
        </div>
        <div style="height:160px;display:flex;justify-content:center;align-items:center">
          <img style="width:30%;height:70%" src="../../assets/image/pay/钱包码.png" alt />
        </div>
        <div>
          <input type="text" style="border:1px solid red;height:24px;padding:0 10px;width:80%;display:block;margin:0 auto" placeholder="https://"/>
        </div>
				<div style="margin:40px 0;width:100%;text-align:center">
					<van-button color="#1F92E3" style="height:26px;line-height:26px;">确定提交</van-button>
				</div>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  data: () => ({
    shows: false
  }),
  methods: {
    goUpperStory() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss">
::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  text-align: left;
  padding-left: 10px;
  color: #999;
  font-size: 14px;
}

::-moz-placeholder {
  /* Firefox 19+ */
  text-align: left;
  padding-left: 10px;
  color: #999;
  font-size: 14px;
}

:-ms-input-placeholder {
  /* IE 10+ */
  text-align: left;
  padding-left: 10px;
  color: #999;
  font-size: 14px;
}

:-moz-placeholder {
  /* Firefox 18- */
  text-align: left;
  padding-left: 10px;
  color: #999;
  font-size: 14px;
}
</style>